<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { gethospitalInfo } from '@/api/hospital';
import { useRouter } from 'vue-router';
import type { Ref } from 'vue';
import { useCounterStore } from '@/stores/counter';
interface IHospitalList {
    id: number
    kinds: string
    name: string
    image: string
    desc: string
    position: string
}
const hospitallist: Ref<IHospitalList[]> = ref([])
onMounted(() => {
    gethospitalInfo().then(res => {
        hospitallist.value = res.data.data
    })
})

const router = useRouter()
const search: Ref<string> = ref("");
function upAddress() {
    router.push('/city')
}
function searchInput() { }
function goBack() {
    router.back()
}

const value1 = ref(0)
const value2 = ref('a')
const value3 = ref(4)
const value4 = ref('d')

const use  = useCounterStore()
const option1 = [
    { text: '综合排序', value: 0 },
];
const option2 = [
    { text: '科室', value: 'a' },
    { text: use.department, value: 'b' },
]; const option3 = [
    { text: '疾病', value: 4 },
    { text: use.body, value: 5 },
];
const option4 = [
    { text: '筛选', value: 'd' },
];


function getHospital(hospitalName: number){
    // console.log(hospitalName);
    use.gethospital(hospitalName)
    router.push('/reservation')
}

function getdepartmentlist (){
    router.push('/department')
}

function getbodylist(){
    router.push('/body')
}
</script>
<template>
    <div class="header">
        <van-icon name="arrow-left" @click="goBack" />
        <van-search v-model="search" placeholder="请输入搜索关键词" @input="searchInput" />
        <div @click="upAddress">
            <van-icon name="location" />
            <span v-if="use.city">{{use.city}}</span> <span v-else>北京</span>
        </div>
    </div>
    <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" @click="getdepartmentlist "/>
        <van-dropdown-item v-model="value3" :options="option3"  @click="getbodylist"/>
        <van-dropdown-item v-model="value4" :options="option4"  />
    </van-dropdown-menu>
    <template class="box">
            <van-card 
            v-for="value in hospitallist" 
            :key="value.id" :desc="value.desc" 
            :title="value.name" 
            :thumb="value.image" 
            @click="getHospital(value.id)"
            />
    </template>

</template>
<style lang="scss" scoped>
.header {
    height: .44rem;
    font-size: .20rem;
    display: flex;
    align-items: center;
}
.box{
    overflow: auto;
}
</style>